<template>
  <div id="main-box">
    <div class="back-ground">
      <!--      <snow></snow>-->
    </div>
    <div class="main-header">
      <Header name="header"/>
    </div>
    <div class="main-body">
      <slot></slot>
    </div>
    <div class="main-footer">
      <Footer name="footer"/>
    </div>
    <div class="main-other">
      <div class="right-box">
        <suspension-box/>
      </div>
      <div class="live2d-right-box">
        <!--        <live2d ref="live2d"></live2d>-->
      </div>
      <div class="dialog-box">
        <!--        <EmailInputBox ref="applyInput"></EmailInputBox>-->
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import Header from "~/layouts/header.vue";
import Footer from "~/layouts/footer.vue";
import SuspensionBox from "~/components/constant/suspensionBox.vue";

</script>
<style lang="scss" scoped>
.main-header {
  width: 100%;
  transition: all 1s ease 1s;
  background-color: var(--header-bgc);
  z-index: 199999;
}

.main-body {
  max-width: 81rem;
  padding: 1px;
  margin: auto;
  position: relative;
}
.main-footer{
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 99999;
  background-color: var(--header-bgc);
}
</style>